<template>
      <div class="container">
        <div class="head-center">
            <div class="input-group">
                <span class="input-group-btn">
                </span>
            </div>
        </div>
        <div class="page-header">
            <h1>我的订单 <small>{{this.$store.state.order_id}}号订单都在这里哦!</small></h1>
        </div>
        <ul v-if="order_items.length > -1" class="list-group">
            <li class="list-group-item" v-for="order_item,index in order_items" :key="index">                      
                <div class="order-info">
                    <div>
                        <h4>商品名: {{order_item.commodity.name}}</h4>
                        <h4>单价: {{order_item.commodity.price}}.00￥</h4>
                        <h4>数量: {{order_item.amount}}</h4>
                        <h4>总价: {{order_item.totalPrice}}.00￥</h4>
                    </div>
                </div>
            <img :src="parseImage(order_item.commodity.image)" :alt="order_item.commodity.name" class="img-thumbnail">
            </li>
        </ul>
        <div v-else style="text-align: center;">
            <img src="../assets/svg/undraw_page_not_found_re_e9o6.svg" height="300">
            <h2 style="margin: 50px auto 100px auto;">您未存在购买记录</h2>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    name:"orderDetail",
    data(){
        return{
            order_items:[]
        }
    },
    methods:{
            // 图片路径解析
    parseImage: function (name) {
      return axios.defaults.baseURL + '/images/' + name + '.png'
    }
    },
    beforeMount(){
        // console.log('object :>> ', this.$store.state.orders);
        this.order_items=this.$store.state.orders[this.$store.state.order_index].items
        console.log('object :>> ',this.order_items);
    }

}
</script>

<style>
.list-group {
  margin-bottom: 100px;
}

.list-group-item .img-thumbnail {
  width: 100px;
  height: 100px;
  position: relative;
  left: 64px;
  top: 24px;
  object-fit: cover;
}

.order-info {
  display: inline-flex;
  position: relative;
  left: 14px;
  top: -14px;
// background-color: lightcoral;
}
</style>